<template>
  <div id="rank">rank</div>
</template>

<script>
import mixin from "../utils/mixin";
const verticalGradient = function (startColor, stopColor) {
  return {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: startColor, // 0% 处的颜色
      },
      {
        offset: 1,
        color: stopColor, // 100% 处的颜色
      },
    ],
  };
};
export default {
  mixins: [mixin],
  data() {
    return {
      categoryDatas: null,
      seriesDatas: null,
      startValue: 0,
      endValue: 9,
      timerId: null,
    };
  },
  mounted() {
    this.init("rank", "api/rank");

    this.renderChart();
    this.myChart.on("mouseover", () => {
      clearInterval(this.timerId);
    });
    this.myChart.on("mouseout", () => {
      this.tools1();
    });
  },
  computed: {
    option() {
      return {
        title: {
          text: "┃ 地区销售排行",
          left: this.baseSize / 2,
          top: this.baseSize / 2,
          // fontSize: this.baseSize,
        },
        grid: {
          top: "40%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        dataZoom: {
          show: false,
          startValue: this.startValue,
          endValue: this.endValue,
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          type: "category",
          data: this.categoryDatas,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.seriesDatas,
            type: "bar",
            barWidth: this.baseSize,
            itemStyle: {
              color: (item) => {
                if (item.value >= 300) {
                  return verticalGradient("#0bab2c", "#4ff778");
                } else if (item.value >= 200) {
                  return verticalGradient("#2e72bf", "#23e5e5");
                } else {
                  return verticalGradient("#5052ee", "#ab6ee5");
                }
              },
              barBorderRadius: [this.baseSize / 2, this.baseSize / 2, 0, 0],
            },
          },
        ],
      };
    },
  },
  destroyed() {
    clearInterval(this.timerId);
  },
  methods: {
    dealData() {
      // console.log(this.originData);
      this.originData = this.originData.sort((a, b) => {
        return b.value - a.value;
      });
      this.categoryDatas = this.originData.map((item) => item.name);
      this.seriesDatas = this.originData.map((item) => item.value);
      this.tools1();
    },
    tools1() {
      if (this.timerId) clearInterval(this.timerId);
      this.timerId = setInterval(() => {
        this.startValue++;
        this.endValue++;
        if (this.endValue >= this.categoryDatas.length) {
          this.startValue = 0;
          this.endValue = 9;
        }
        this.updateChart();
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
#rank {
  width: 100%;
  height: 100%;
}
</style>